const express = require('express'),
      w       = require('webpack'),
      opn     = require('opn'); // 打开浏览器
    
const app = express();

// express 联合webpack 各种middle
const connecthistoryapifallback = require('connect-history-api-fallback'),
      httpproxymiddleware = require('http-proxy-middleware'),
      webpackdevmiddleware = require('webpack-dev-middleware'),
      webpackhotmiddleware = require('webpack-hot-middleware');

// 获取开发环境配置文件
const config = require('./webpack.common.conf.js')("dev"); // 环境直接传里面去
// console.log(config);
// 获取webpack执行后的配置文件
const compiler = w(config); // 为了给express一起用的 给app用
// console.log(compiler);
// console.log(config.module.rules[1]);
// 使用中间件
//app.use(webpackdevmiddleware(compiler));
app.use(webpackdevmiddleware(compiler, {
    publicPath: config.output.publicPath
}));

app.use(webpackhotmiddleware(compiler));

// 模块热更新参照这个来配合 https://www.jianshu.com/p/bba6bc0a0739

// proxy historyapifallback 从配置文件提取出来 搞到两块单独的文件中来，这样devServer 和 server.js都可以用
const proxyTable = {

} // 从dev.config.js配置文件抽离出来 server 和 dev 都用一份配置。

// 遍历出proxyTable每一项
// console.log(httpproxymiddleware);
for(let k in proxyTable){
    app.use(httpproxymiddleware(k, proxyTable[k]));
}

// 直接传拆解出来的配置文件
app.use(connecthistoryapifallback({}));

const port = 3012;

app.listen(port, () => {
    console.log('listened');
    opn('http://192.168.3.100:' + port);
})